<!-- Vue 3 单文件组件，使用 <script setup> 语法糖 -->
<!-- 这是 Vue 3 推荐的写法，相比选项式 API 更简洁，编译时性能更好 -->
<script setup>
// 从 Vue 中导入 ref 函数，用于创建基本类型的响应式数据
// ref 是 Vue 3 中实现响应式的核心 API 之一
import { ref } from 'vue'

// 使用 ref 创建响应式变量 number，初始值为 1
// ref 包装的变量会变成一个 RefImpl 对象，通过 .value 访问和修改其值
// 在模板中使用时不需要 .value，Vue 会自动解包
let number = ref(1)

// 定义点击事件处理函数 addNumber
// 箭头函数写法，简洁且不绑定 this（在 setup 中 this 不是组件实例）
const addNumber = () => {
    // 修改响应式变量的值，必须通过 .value 访问
    // 这样 Vue 才能追踪到数据变化，从而触发视图更新
    number.value++
}
</script>

<!-- 模板部分：定义组件的 HTML 结构和数据绑定 -->
<template>
    <!-- 使用 {{ }} 插值语法显示响应式变量 number 的值 -->
    <!-- 这里直接写 number 即可，不需要 .value，Vue 会自动处理 -->
    <div>数字：{{ number }}</div>

    <!--
        按钮元素，通过 @click 指令绑定点击事件
        @click 是 v-on:click 的简写形式，用于监听 DOM 点击事件
        事件处理函数为上面定义的 addNumber，点击按钮时会执行该函数
    -->
    <button @click="addNumber">+</button>
</template>

<!-- 样式部分：定义组件的 CSS 样式 -->
<!-- scoped 属性表示当前样式仅作用于当前组件内的元素 -->
<!-- 避免样式污染其他组件，是组件化开发的最佳实践 -->
<style scoped>

</style>